<template>
  <div>
    <div>
      <h3 class="title">圈员标签</h3>
      <div class="label_search">
        <div class="taglabel">
          <el-tag
            :key="indenx"
            v-for="(tag, indenx) in tags"
            :disable-transitions="false"
          >
            {{ tag.name }}
          </el-tag>
        </div>
        <el-button size="mini" class="label_more"
          >更多<i class="el-icon-caret-bottom"></i
        ></el-button>
      </div>
      <!-- <el-tag v-for="tag in tags" :key="tag.name" :type="tag.type">
        {{ tag.name }}
      </el-tag> -->
    </div>
    <h3 class="title">商机分析</h3>
    <div>
      <el-table :data="getBusinesslisttable" style="width: 100%" size="mini">
        <el-table-column prop="type" label="类别" width="100px">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row[scope.column.property]"
              placeholder="操作标记"
              size="mini"
            >
              <el-option
                v-for="(item, index) in typelist"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="120px">
          <template slot-scope="scope">
            <el-cascader
              :props="defaultParams"
              :options="options"
              v-model="selectedOptions"
              size="mini"
            ></el-cascader>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="来源" width="120px">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row[scope.column.property]"
              placeholder=""
              size="mini"
            >
              <el-option
                v-for="(item, index) in getBusinessobjckt.sourceList"
                :key="index"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="yjcje" label="预计成交价" width="100px">
        </el-table-column>

        <!-- <el-table-column prop="yjcjTime" label="预计成交时间" width="140px">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row[scope.column.property]"
              placeholder="操作分类"
              size="mini"
            >
              <el-option
                v-for="(item, index) in options2"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column> -->
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row[scope.column.property]"
              placeholder="归类"
              size="mini"
            >
              <el-option
                v-for="(item, index) in getBusinessobjckt.statuslist"
                :key="index"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column prop="remark" label="备注"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import ComTable from "@/wss/components/comTable.vue";
export default {
  name: "Business",
  props: {
    getBusinesslisttable: {
      type: Array,
    },
    //来源跟状态的集合
    getBusinessobjckt: {
      type: Object,
    },
    getBusinessnamelist: {
      type: Array,
    },
    //  getFatherMethod: {
    //   type: Function,
    //   default: () => {
    //     return Function;
    //   },
    // },
  },

  components: { ComTable },
  data() {
    return {
      // 表格配置
      config: {
        // border: true,
        isAdd: false,
        loading: false,
      },
      options: [],
      selectedOptions: [],
      defaultParams: {
        label: "name",
        value: "id",
        children: "children",
      },
      tags: [
        { name: "标签一", type: "" },
        { name: "标签二", type: "success" },
        { name: "标签三", type: "info" },
        { name: "标签四", type: "warning" },
        { name: "标签五", type: "danger" },
        { name: "标签一", type: "" },
        { name: "标签二", type: "success" },
        { name: "标签三", type: "info" },
        { name: "标签四", type: "warning" },
      ],
      typelist: [
        {
          label: "咨询",
          value: "5",
        },
        {
          label: "项目",
          value: "6",
        },
      ],
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10 },
    };
  },
  created() {},
  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

<style>
.title {
  text-align: left;
  margin: 10px;
  font-weight: 700;
}
/* .el-tag{
  margin: 5px;
} */

.taglabel .el-tag {
  /* font-weight: normal; */
  font-size: 12px;
  /* color: #666; */
  /* margin-bottom: 16px; */
  margin: 5px;
}

.label_more {
  display: block;
  background-color: transparent;
  border: 0;
  margin: 0 auto;
  color: #b9b9b9;
}
</style>